<template>
  <div class="catelist-wrap">
    <div style="width: 100%; height: 74px">
      <div class="top">
        <!-- 头部结构 -->
        <div class="header">
          <div class="bg">
            <div class="home" @click="goHome"></div>
            <i></i>
            <div class="right">
              <span class="search" @click="goSearch"></span>
              <span class="car" @click="goCart"></span>
            </div>
          </div>
        </div>
        <!-- 导航标签栏 -->
        <van-tabs line-height="1px" class="nav" @click="changeTab" v-model="active">
          <van-tab v-for="(item, index) in categoryL2List" :key="item.id" :title="item.name" :name="item.id"></van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部结构 -->
    <div class="footer" ref="footerRef" v-show="isShow">
      <!-- 底部标题 -->
      <div class="title">
        <span>快速与喜 爱噢回复</span>
      </div>
      <!-- 底部商品 -->
      <div class="goodList">
        <ul class="list">
          <li class="good" v-for="(item, index) in categoryItems.itemList" :key="item.id">
            <div class="img">
              <van-image :src="item.listPicUrl" alt="" />
            </div>
            <div class="des">暖暖自然风 宠物智能</div>
            <div class="price">
              <span class="new">
                <span class="in">¥</span>
                <span class="pn">1699</span>
              </span>
              <span class="old">
                <span class="io">¥</span>
                <span class="po">1899</span>
              </span>
            </div>
            <div class="red">
              <div class="left">
                <span>特价</span>
              </div>
              <div class="right">正在抢购中</div>
            </div>
          </li>
          <li class="good">
            <div class="img">
              <img src="https://yanxuan-item.nosdn.127.net/261c48464d8779272b4124a2c2765be7.jpg?type=webp&imageView&quality=65&thumbnail=330x330" alt="" />
            </div>
            <div class="des">暖暖自然风 宠物智能烘干箱</div>
            <div class="price">
              <span class="new">
                <span class="in">¥</span>
                <span class="pn">1699</span>
              </span>
              <span class="old">
                <span class="io">¥</span>
                <span class="po">1899</span>
              </span>
            </div>
            <div class="red">
              <div class="left">
                <span>特价</span>
              </div>
              <div class="right">正在抢购中</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <van-loading color="#1989fa" v-show="!isShow" size="40px" vertical>加载中...</van-loading>
  </div>
</template>
<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  // 组件名字
  name: "App",
  // 状态数据
  data() {
    return {
      // 收集到的是二级分类的id
      active: 0,
      // 底部结构切换标识符
      isShow: true,
    };
  },
  mounted() {
    if (this.$store.state.category.category2Id > 0) {
      this.active = this.$store.state.category.category2Id;
    }
    // console.log(this.$store.state.category.index);
    this.getCate2Data(this.$route.query.categoryId, this.$route.query.subCategoryId);
  },
  computed: {
    ...mapGetters("category", ["categoryItems", "categoryL1", "categoryL2List"]),
  },
  methods: {
    // 定义请求二级分类数据的函数
    async getCate2Data(categoryId, subCategoryId) {
      this.isShow = false;
      await this.$store.dispatch("category/cateGroupData", { categoryId, subCategoryId });
      this.isShow = true;
    },
    // 点击切换tab栏的点击事件
    changeTab() {
      this.$router.push({ path: "/catelist", query: { categoryId: this.$route.query.categoryId, subCategoryId: this.active, categoryType: 0 } });
      this.getCate2Data(this.$route.query.categoryId, this.active);
      this.$refs.footerRef.scrollTop = 0;
    },
    // 点击小房子切换到主页
    goHome() {
      this.$router.push("/home");
    },
    // 点击切换到搜索页
    goSearch() {
      this.$router.push("/innerSearch");
    },
    // 点击切换到购物车页面
    goCart() {
      this.$router.push("/shopcart");
    },
  },
};
</script>
<style scoped lang="less">
.catelist-wrap {
  width: 100%;
  height: 100%;
  background-color: rgb(237, 233, 233);
  overflow: hidden;
  .top {
    .header {
      height: 44px;
      border-bottom: 1px solid hsl(0deg 7% 84%);
      background-color: #fff;
      .bg {
        width: 375px;
        height: 100%;
        padding: 0 10px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .home,
        i {
          background-size: 120px 110px;
          background-image: url(../../../assets/hxm.png);
          background-repeat: no-repeat;
        }
        .home {
          width: 24px;
          height: 24px;
          background-position: 0 -86px;
        }
        i {
          width: 86px;
          height: 27px;
          background-position: 0px 0px;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
        .right {
          width: 74px;
          height: 32px;
          position: relative;
          .search,
          .car {
            background-size: 120px 110px;
            background-image: url(../../../assets/hxm.png);
            background-repeat: no-repeat;
          }
          .search {
            width: 32px;
            height: 32px;
            background-position: -90px -1px;
            position: absolute;
            right: 45px;
            top: 0;
          }
          .car {
            width: 32px;
            height: 32px;
            background-position: -38px -32px;
            position: absolute;
          }
        }
      }
    }
    .nav {
      height: 30px;
    }
    :deep(.van-tabs__wrap) {
      height: 30px;
    }
    :deep(.van-tab--active) {
      color: #fa1e32;
    }
  }
  .footer {
    width: 100%;
    height: 100%;
    background-color: rgb(237, 233, 233);
    overflow-y: scroll;
    .title {
      height: 55px;
      margin-top: 10px;
      font-size: 14px;
      line-height: 55px;
      background-color: #fff;
    }
    .goodList {
      width: 100%;
      background-color: #fff;
      .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 10px;
        box-sizing: border-box;
        justify-content: space-between;
        .good {
          width: 48%;
          height: 283px;
          padding-bottom: 26px;
          .img {
            width: 172px;
            height: 172px;
            img {
              width: 172px;
              height: 172px;
              border-radius: 10px;
            }
          }
          .des {
            width: 172px;
            font-size: 15px;
            text-align: left;
            margin-top: 8px;
            line-height: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .price {
            width: 87px;
            height: 30px;
            line-height: 30px;
            .new {
              color: rgb(250, 30, 50);
              padding-right: 2px;
              .in {
                font-size: 12px;
              }
              .pn {
                font-size: 20px;
                font-weight: 700;
              }
            }
            .old {
              font-size: 12px;
              text-decoration: line-through;
            }
          }
          .red {
            font-size: 12px;
            display: flex;
            height: 23px;
            line-height: 23px;
            margin-top: 5px;
            background-color: #ffe9eb;
            border-radius: 10px;
            .left{
              width: 24px;
              height: 15px;
              padding: 2px 6px;
              background-color: #fa1e32;
              border-radius: 10px;
              color: #fff;
              font-weight: 700;
              line-height: 15px;
              margin-top: 2px;
            }
            .right{
              color: #fa1e32;
              font-weight: 600;
              margin-left: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
